<template>
	<view>
		<m-container :status="onLine ? status : 6" :reloadFunc="reloadFunc">
			<view class="publish-container">
				<view class="input-form"><textarea class="publish-content" placeholder="说点什么..."></textarea></view>
				<view class="img-list">
					<view class="img-item" v-if="imgList.length" v-for="(item, index) in imgList" :key="index" @tap="previewImg">
						<image class="icon" :src="item" mode="aspectFill"></image>
						<image class="close" src="../../static/close.png" @tap.stop="deleteImg(index)"></image>
					</view>
					<view class="img-item add-img" v-if="!(imgList.length === 9)" @tap="chooseImg"><image class="icon" src="../../static/add-icon.png"></image></view>
				</view>
				<view class="desc category">
					<text class="title">类别</text>
					<view class="category-list">
						<view v-for="(item, index) in categoryList" :key="index" @tap="chooseCategory(item)" class="category-item" :class="category.includes(item) ? 'active' : ''">
							{{ item }}
						</view>
					</view>
				</view>
				<view class="publish-btn">发布</view>
			</view>
		</m-container>
		<tabbar :currentIndex="1"></tabbar>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			status: 2,
			publishForm: {
				content: '',
				imgList: []
			},
			category: [],
			imgList: [],
			categoryList: ['服饰', '数码', '书籍', '工具']
		};
	},
	computed: {
		...mapState(['onLine'])
	},
	methods: {
		reloadFunc() {},
		// 选择图片
		chooseImg() {
			uni.chooseImage({
				count: 9,
				success: res => {
					this.imgList = res.tempFilePaths;
				}
			});
		},
		// 预览图片
		previewImg() {
			if (this.imgList.length) {
				uni.previewImage({
					urls: this.imgList
				});
			}
		},
		// 删除图片
		deleteImg(index) {
			let imgList = this.imgList;
			imgList.splice(index, 1);
			this.imgList = imgList;
		},
		// 选择类别
		chooseCategory(category) {
			let categoryList = this.category;
			if (categoryList.includes(category)) {
				let index = categoryList.indexOf(category);
				categoryList.splice(index, 1);
			} else {
				categoryList.push(category);
			}
			this.category = categoryList;
		}
	}
};
</script>

<style lang="less" scoped>
/* miniprogram/pages/publish/publish.wxss */
.publish-container {
	background: #ffffff;
	padding: 20rpx;
}
.publish-content {
	width: 100%;
}
.img-list {
	margin-top: 40rpx;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}
.img-list .img-item {
	height: 200rpx;
	width: 200rpx;
	margin-right: 40rpx;
	margin-bottom: 20rpx;
	position: relative;
}
.img-list .img-item:nth-child(3n) {
	margin-right: 0rpx;
}
.img-list .img-item .icon {
	width: 100%;
	height: 100%;
	border-radius: 10rpx;
}
.img-list .img-item .close {
	position: absolute;
	width: 48rpx;
	height: 48rpx;
	top: -26rpx;
	right: -26rpx;
	z-index: 10;
}
.img-list .add-img {
	background: #cccccc;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}
.img-list .add-img .icon {
	height: 50%;
	width: 50%;
}
.publish-btn {
	height: 80rpx;
	margin-top: 40rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #ffffff;
	background: #d4237a;
	border-radius: 10rpx;
}
.desc {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	margin-top: 20rpx;
}
.desc .title {
	padding: 10rpx 0rpx;
	border-bottom: 1rpx solid #eeeeee;
}
.category-list {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 20rpx 0rpx;
}
.category-list .category-item {
	background: #ffffff;
	border: 1rpx solid #d4237a;
	color: #d4237a;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 4rpx 20rpx;
	border-radius: 40rpx;
	margin-right: 20rpx;
	margin-bottom: 20rpx;
}
.category-list .active {
	background: #d4237a;
	color: #ffffff;
}
</style>
